<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>当一行文字超出一行的时候自动滚动</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.container {
				width: 300px;
				margin: 0 auto;
			}
			/*横向样式*/
			.box {
				width: 200px;
				border: 1px solid #000;
				padding: 10px;
				white-space: nowrap;
				overflow: hidden;
			}
			.child {
				display: inline-block;
			}
			/*纵向样式*/
			.box1 {
				width: 20px;
				height: 200px;
				border: 1px solid #000;
				padding: 10px;
				overflow: hidden;
			}
			.mb10 {
				margin-bottom: 10px;
			}
			
		</style>
	</head>
	<body>
		<div class="container">
			<h3 class="mb10">横向</h3>
			<div class="box mb10">
				<div class="child">
					君不见黄河之水天上来，奔流到海不复回，君不见高堂明镜悲白发，朝如青丝暮成雪，人生得意须尽欢，莫使金樽空对月
				</div>
			</div>
			<h3 class="mb10">纵向</h3>
			<div class="box1">
				<div class="child1">
					君不见黄河之水天上来，奔流到海不复回，君不见高堂明镜悲白发，朝如青丝暮成雪，人生得意须尽欢，莫使金樽空对月
				</div>
			</div>
		</div>
		<script>
			var exports = window.exports || {}
			var module = window.module || {}
		</script>
		<script src="../lib/index.js"></script>
		<script type="text/javascript">
			const test = new Textsliding({parentClass: '.box', childClass: '.child'})
			test.init()
			const test1 = new Textsliding({parentClass: '.box1', childClass: '.child1', direction: 'portrait'})
			test1.init()
		</script>
	</body>
</html>
